<!--
 * @Description: 新建以太口配置
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-09-11 16:07:56
 * @LastEditTime: 2021-09-26 16:25:10
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form ref="etherForm" :model="form" :rules="rules" label-width="80px" label-position="right">
      <!-- 端口选择 -->
      <el-form-item label="端口选择" prop="intfName">
        <el-select
          v-model="form.intfName"
          style="width:100%;"
          @change="changePort"
          :disabled="form.id ? true: false"
        >
          <el-option v-for="(item, index) in portList" :key="index" :value="item.name">{{item.name}}</el-option>
        </el-select>
      </el-form-item>
      <!-- 协议状态 -->
      <el-form-item label="协议状态" prop="operStatus">
        <el-input v-model="form.operStatus" placeholder style="width:100%;" disabled></el-input>
      </el-form-item>
      <!-- 管理状态 -->
      <el-form-item label="管理状态" prop="adminStatus">
        <el-select v-model="form.adminStatus" style="width:100%;">
          <el-option value="UP" label="UP"></el-option>
          <el-option value="DOWN" label="DOWN"></el-option>
        </el-select>
      </el-form-item>
      <!-- 工作模式 -->
      <el-form-item label="工作模式" prop="workMode">
        <el-select v-model="form.workMode" style="width:100%;">
          <el-option
            v-for="(item, index) in modelList"
            :key="index"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['ne', 'type', 'dialogStatus', 'ethernetInfo', 'portList'],
  data () {
    return {
      dialogTitle: '新建接口配置',
      form: {
        id: null,
        intfName: null,
        adminStatus: 'UP',
        operStatus: null,
        workMode: 'AUTO_NEGOTIATION'
      },
      modelList: [
        { value: 'AUTO_NEGOTIATION', label: '自协商' },
        { value: 'HALF_100M', label: '半双工100M' },
        { value: 'FULL_100M', label: '全双工100M' },
        { value: 'FULL_1G', label: '全双工1G' }
      ],
      rules: {
        intfName: [{
          required: true,
          message: '请选择端口',
          trigger: 'change'
        }],
        adminStatus: [{
          required: true,
          message: '请选择端口状态',
          trigger: 'change'
        }],
        workMode: [{
          required: true,
          message: '请选择工作模式',
          trigger: 'change'
        }]
      }
    };
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'create') {
          _this.dialogTitle = '新建接口配置';
          _this.form = {
            id: null,
            intfName: null,
            adminStatus: 'UP',
            workMode: 'AUTO_NEGOTIATION',
            operStatus: null
          };
        } else {
          _this.dialogTitle = '编辑接口配置';
          _this.form = {
            id: this.ethernetInfo.id,
            intfName: this.ethernetInfo.intfName,
            adminStatus: this.ethernetInfo.adminStatus ? 'UP' : 'DOWN',
            workMode: this.ethernetInfo.workMode,
            operStatus: this.ethernetInfo.operStatus ? 'DOWN' : 'UP'
          };
        }
      }
    }
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('handleDialog', false);
      _this.$refs['etherForm'].resetFields();
    },
    // 选择端口 过滤状态
    changePort (val) {
      let _this = this;
      if (val) {
        for (let i = 0; i < _this.portList.length; i++) {
          if (_this.portList[i].name === val) {
            _this.form.operStatus = !_this.portList[i].operStatus ? 'UP' : 'DOWN';
          }
        }
      }
    },
    // 确认
    onSubmit () {
      let _this = this;
      _this.$refs['etherForm'].validate((valid) => {
        if (valid) {
          let params = {
            neId: _this.ne.id,
            intfName: _this.form.intfName,
            adminStatus: _this.form.adminStatus === 'UP' ? true : false,
            workMode: _this.form.workMode,
            operStatus: _this.form.operStatus === 'UP' ? false : true
          };
          if (_this.form.id) {
            params.id = _this.form.id;
          }
          let url = _this.form.id ? '/api/sdwan/ethport/update' : '/api/sdwan/ethport/create';
          _this.$http.post({
            url: url,
            data: params
          }).then(res => {
            let { status } = res;
            if (status === '0') {
              if (_this.form.id) {
                _this.$message.success('更新成功！');
              } else {
                _this.$message.success('创建成功！');
              }
              _this.$emit('handleDialog', false);
              _this.$parent.refresh();
              _this.$parent.getProtList();
            }
          });
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.ip-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 75%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input:last-child {
    width: 20%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
.ip-port-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 50%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input {
    width: 20%;
  }
  ::v-deep .el-input:last-child {
    width: 20%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
</style>